<template>
	<view class="ljapp wallet">
		<view class="header" :style="'background-image: url('+$base.cdn('/uploads/20220414/da62ead54b45e6e524abe452c5e77860.png')+');'">
			<u-navbar placeholder autoBack leftIconColor="#fff" titleStyle ="color:#fff;" title="我的钱包" :bgColor="'rgba(53,107,253,'+navbarBgAlpha+')'"></u-navbar>
			<view class="outer">
				<view class="tit">可提现金额</view>
				<view class="money">{{doctorobj.money}}</view>
				<view class="btn-box u-flex u-flex-center">
					<navigator url="/pagesD/doctor/withdrawLog" class="btn-withdraw-log u-flex u-flex-center u-flex-y-center">
						<image src="/pagesL/static/health/withdraw.png" mode="aspectFill"></image>
						<view>提现记录</view>
					</navigator>
					<navigator url="/pagesD/doctor/withdraw" class="btn-withdraw u-flex u-flex-center u-flex-y-center">
						<image src="/static/lj/common/wallet.png" mode="aspectFill"></image>
						<view>提现</view>
					</navigator>
				</view>
			</view>

			<view class="databox">
				<view class="inner u-flex">
					<view class="item">
						<view class="tit">图文问诊</view>
						<view class="num">{{doctorobj.tw_money||0}}</view>
					</view>
					<view class="item">
						<view class="tit">视频问诊</view>
						<view class="num">{{doctorobj.sp_money||0}}</view>
					</view>
					<view class="item">
						<view class="tit">报告解读</view>
						<view class="num">{{doctorobj.report_money||0}}</view>
					</view>
					<view class="item">
						<view class="tit">签约患者</view>
						<view class="num">{{doctorobj.sign_money||0}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="head u-flex u-flex-between">
				<view class="u-flex">
					<view class="year u-flex" @click="openDate">
						<view class="datenum">{{year}}/{{month>9?month:'0'+month}}</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
					<view class="month u-flex" @click="openCate">
						<view class="datenum">{{cateColumns[0][cate[0]].label}}</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
				</view>
			</view>
			<u-datetime-picker ref="datetimePicker" mode="year-month" :show="showDate" v-model="dateVal" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
			<u-picker ref="catePicker" :show="showCate" :columns="cateColumns" :defaultIndex="cate" keyName="label" @cancel="showCate=false" @confirm="changeCate"></u-picker>

			<view class="list" v-for="(log,index) in group.list" :key="index">
				<view class="head">
					<view class="tit">{{parseInt($u.timeFormat(log.createtime,'m'))}}月</view>
					<view class="con">收入 ￥{{log.total_money}}</view>
				</view>

				<view class="item u-flex u-flex-between u-flex-y-center" v-for="(item,idx) in log.list" :key="idx">
					<view class="u-flex">
						<view class="icon">
							<image class="tw" src="/static/lj/common/group_711.png" mode="aspectFill" v-if="item.cate==1||item.cate==21"></image>
							<image class="sp" src="/static/lj/common/icon_department.png" mode="aspectFill" v-else-if="item.cate==2||item.cate==22"></image>
							<image class="report" src="/static/lj/common/icon_abnormal.png" mode="aspectFill" v-else-if="item.cate==3||item.cate==23"></image>
							<image class="qy" src="/static/lj/common/icon_department-1.png" mode="aspectFill" v-else-if="item.cate==4||item.cate==24"></image>
							<image class="qy" src="/static/lj/common/icon_department-1.png" mode="aspectFill" v-else-if="item.cate==5||item.cate==25"></image>
							<image class="qy" src="/static/lj/common/icon_department-1.png" mode="aspectFill" v-else></image>
						</view>
						<view>{{item.memo}}</view>
					</view>
					<view class="money">￥{{item.money}}</view>
				</view>
			</view>
			<lj-empty paddingTop="100" v-if="!loading && group.list.length<=0">暂无数据</lj-empty>

			<!-- <u-loadmore
				:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
				fontSize="12"
				color="#ccc"
				nomoreText="已加载全部"
				marginTop="30rpx"
				marginBottom="0"
				@loadmore="getList"
			></u-loadmore> -->
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navbarBgAlpha: 0,

				showDate: false,
				yearmonth: '',
				dateVal: Number(new Date()),
				year: '',
				month: '',
				
				showCate: false,
				cate: [0],
				cateColumns: [
					[
						{
							label: '类别',
							id: 0
						},
						{
							label: '图文',
							id: 0
						},
						{
							label: '视频',
							id: 0
						},
						{
							label: '报告',
							id: 0
						},
						{
							label: '签约',
							id: 0
						},
						{
							label: '开方',
							id: 0
						},
					]
				],

				doctorobj: {}, //详情
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,

				tab: 0,
			}
		},
		onLoad() {
			var myDate = new Date();
			this.year = myDate.getFullYear();
			this.month = myDate.getMonth()+1;
			this.yearmonth = this.year+'-'+this.month;
		},
		onShow(){
			this.$Http({
				url: 'getUserInfo',
				data: {},
				type:'POST',
			}).then(res => {
				if (res.code == 1) {
					this.doctorobj = res.data.doctor_info
				}
			});
			this.init();
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onPageScroll: function(e) {
			var a = e.scrollTop/80
			this.navbarBgAlpha = a>1?1:a
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			init(){
				this.group.list = []
				this.group.loaded = false
				this.loading = false

				this.getList()
			},
			getList(){
				var that = this,group = that.group;
				if(that.loading || group.loaded) return;

				that.loading = true

				this.$Http({
					url: 'doctorGetMoneyLog',
					data: {
						page: group.page,
						limit: group.limit,
						yearmonth: this.yearmonth,
						cate: this.cate[0]
					},
				}).then(res=>{
					if(res.code == 1){
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}

					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			changeDate(e){
				console.log(e)
				var myDate = new Date(e.value);
				this.year = myDate.getFullYear();
				this.month = myDate.getMonth()+1;
				this.yearmonth = this.year+'-'+this.month;
				this.showDate = false
				this.init()
			},
			openDate(e){
				this.$refs.datetimePicker.setDate(Number(new Date(this.year+'/'+this.month+'/01').getTime()))
				this.showDate = true
			},
			openCate(){
				this.$refs.catePicker.setIndexs(this.cate)
				this.showCate = true
			},
			changeCate(e){
				console.log(e)
				this.cate = e.indexs
				this.showCate = false
				this.init()
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesD/style.less';
</style>
